<template>
  <view>
    <view class="custom_top">
      <view class="item left">
        <i class="back iconfont icon-xiangzuo2" @click="goBack"></i>
        <i class="home iconfont icon-shouye" @click="goHome"></i>
      </view>
      <view class="item title">好友</view>
      <view class="item right" @click="jumpPage('/pages/im/search_friend')">添加好友</view>
    </view>
    <view class="custom_top_blank"></view>

    <view class="friend_list">
      <view class="items">
        <view class="item item1" @click="jumpPage('/pages/im/new_friend')">
          <view class="bd">
            <image class="avatar" src="/static/images/new_friend.png" mode="scaleToFill" />
            <view class="maininfo">
              <view class="name">新的好友</view>
              <span class="new_number" v-if="loginUser.new_friend_count > 0">+{{loginUser.new_friend_count}}</span>
            </view>
          </view>
        </view>
        <view v-for="(item, index) in users" :key="index">
          <view class="items_blank">{{index}}</view>
          <view class="item" v-for="(item_user, index_user) in item" :key="index_user" @click="jumpPage('/pages/im/friend_index?id=' + item_user.id)">
            <view class="bd">
              <image class="avatar" :src="item_user.avatar" mode="scaleToFill" />
              <view class="maininfo">
                <view class="name">{{item_user.nickname}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
export default {
  data() {
    return {
      loading: true,
      users: [],
      loginUser: {},
    }
  },

  onShow: function() {
    this.getFriends();

    request.post('/user/getLoginUser').then(res => {
      this.loginUser = res.data;
    })
  },

  methods: {
    getFriends: function() {
      request.post('/im/getFriends').then(res => {
        this.loading = false;
        uni.hideLoading();
        this.users = res.data;
      })
    },

    goBack: function() {
      uni.navigateBack();
    },

    goHome: function() {
      uni.switchTab({ url: '/pages/index/index' });
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url("im.css");
page {}
.custom_top_blank {
  height: 54px;
  padding-top: var(--status-bar-height);
}
.custom_top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
  height: 53px;
  line-height: 53px;
  border-bottom: 1px solid #f9f9f9;
  background: #fff;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--status-bar-height);
}
.custom_top .item {
  flex: 1;
}
.custom_top .title {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.custom_top .right {
  text-align: right;
  color: #999;
  font-size: 14px;
}
.custom_top .left .iconfont {
  font-weight: 600;
  font-size: 18px;
}
.custom_top .left .iconfont:not(:first-child) {
  margin-left: 12px;
}
</style>
